<template>
  <view class="uni-wrap">
    <view class="top-wrap">
      <view class="user-wrap">
        <view class="avatar-wrap">
          <image class="user-avatar" :src="defaultAvatarUrl" />
        </view>
        <text class="user-name">{{ userInfo.userName }}</text>
        <text class="user-phone">{{ userInfo.phonenumber }}</text>
      </view>
    </view>

    <!-- <uni-list>
      <uni-list-item
        :show-extra-icon="true"
        showArrow
        :extra-icon="lockIcon"
        title="修改密码"
        link
        to="/pagesMine/changePwd/changePwd"
      />
      <uni-list-item
        :show-extra-icon="true"
        showArrow
        :extra-icon="infoIcon"
        title="关于我们"
        link
        to="/pagesMine/about/about2"
      />
    </uni-list> -->

    <view class="action">
      <button type="white" @click="logOut">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: "",
      defaultAvatarUrl: "/static/user.png",
      userInfo: {},
      lockIcon: {
        color: "",
        size: "22",
        type: "locked",
      },
      infoIcon: {
        color: "",
        size: "22",
        type: "info",
      },
    };
  },
  onLoad() {
    this.baseUrl = this.$baseUrl;
    this.userInfo = uni.getStorageSync("userInfo");
  },
  methods: {
    logOut() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.redirectTo({
              url: "/pages/login/login",
            });
            //清token
            uni.removeStorageSync("token");
            uni.removeStorageSync("userInfo");
            uni.removeStorageSync("userPermissions");
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.top-wrap {
  margin-bottom: 10px;
  .user-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 24rpx 0;
    .avatar-wrap {
      border-radius: 50%;
      width: 134rpx;
      height: 134rpx;
      border: 4rpx solid #eaeaea;
      overflow: hidden;
    }
    .user-avatar {
      width: 100%;
      height: 100%;
      margin-bottom: 19rpx;
    }
    .user-name {
      color: #333333;
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }
    .user-phone {
      color: #999;
      font-size: 26rpx;
    }
  }
}

.action {
  margin: 130rpx 24rpx;
}
</style>
